<template>
  <div>
    <van-row @click="openModal">
      <van-col span="6" class="us">
        <img :src="avatarSrc" alt />
      </van-col>
      <van-col span="10">{{ nickname }}</van-col>
      <van-col span="8">
        <van-icon name="arrow" />
      </van-col>
    </van-row>

    <van-grid :column-num="3">
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>

    <transition name="van-fade">
      <div class="login-modal" v-show="isShowModal">
        <div class="close-modal" @click="isShowModal = !isShowModal"></div>
        <van-form @submit="onSubmit" class="login-form">
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </transition>
  </div>
</template>

<script>
import { GoLogin } from "@/request/api";
export default {
  data() {
    return {
      avatarSrc: require("../assets/user.png"),
      username: "",
      password: "",
      isShowModal: false,
      nickname: "用户登录"
    };
  },
  created() {
    //   组件刚创建的时候需要判断用户有没有登录，获取localStorage有没有token值，
    //如果有token，就表示登录，就应该填上用户信息
    let token = localStorage.getItem("token");
    if (token) {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.nickname = userInfo.username;
      this.avatarSrc = userInfo.avatar;
    }
  },
  methods: {
    onSubmit(values) {
      //   console.log("submit", values);
      let username = values["用户名"];
      let pwd = values["密码"];
      GoLogin({ username, pwd }).then(res => {
        if (res.errno == 0) {
          console.log(res.data);
          //   登录成功了;
          //1、提示框提示登录成功
          this.$toast.success("登录成功");
          //2、把token保存到本地存储
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
          //3、1s后闭模态窗口
          setTimeout(() => {
            this.isShowModal = !this.isShowModal;
            //4、把拿到的userInfo用户信息，填写到页面上
            this.nickname = res.data.userInfo.username;
            this.avatarSrc = res.data.userInfo.avatar;
          }, 1000);
        }
      });
    },
    openModal() {
      //判断用户是否登录，如果登录直接就return，没有登录就isShowModal取反
      let token = localStorage.getItem("token");
      if (token) {
        return;
      }
      this.isShowModal = !this.isShowModal;
    }
  }
};
</script>
 
<style lang = "less" scoped>
.login-modal {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  .login-form {
    width: 90%;
    position: absolute;
    background-color: #fff;
    padding: 0.05rem 0rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.05rem;
    overflow: hidden;
  }
  .close-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.van-row {
  width: 100%;
  display: flex;
  align-items: center;
  height: 0.6rem;
  background-color: #333333;
}
/* .us{
    overflow: hidden;
    background-color: aqua;
} */
.van-col img {
  height: 0.4rem;
  border-radius: 50%;
}
.van-col {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 0.18rem;
}
</style>